<template>
    <!--登录页面-->
    <div class="login-wrapper flex flex-center-center">
        <!--登录表单-->
        <div class="content-box flex">
            <!--左边图片-->
            <div class="left">
                <div style="width: 100%;height: 100%;">
                    <el-image :src="loginFormImg" fit="cover" style="width: 100%;height: 100%;"></el-image>
                </div>
            </div>

            <!--右边表单-->
            <div class="right">
                <div style="padding: 24px;">
                    <!--logo图片-->
                    <div class="logo" style="text-align: center;">
                        <el-image :src="logoImg" fit="cover" style="width: 85px;height: 85px;border-radius: 50%;"></el-image>
                    </div>
                    <!--标题-->
                    <div style="font-size: 24px;margin: 6px 0 24px 0;text-align: center;font-weight: bold;">健康码后台管理系统</div>

                    <el-form
                        ref="form"
                        :model="formData" :rules="rules"
                    >
                        <el-form-item prop="username">
                            <el-input
                                v-model.trim="formData.username" clearable prefix-icon="el-icon-user" placeholder="账号"
                                @keyup.enter.native="onSubmit()"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                v-model.trim="formData.password" clearable prefix-icon="el-icon-lock" placeholder="密码" type="password"
                                show-password @keyup.enter.native="onSubmit()"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="width: 100%;" type="primary" @click="onSubmit()" >登 录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex';

    export default {
        name: "Login",
        data() {
            return {
                loginFormImg: require('@/assets/login-form-fantastic.jpg'),
                logoImg: require('@/assets/logo.png'),
                formData: {
                    username: "admin",
                    password: "123456",
                },
                rules: {
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                },
            }
        },
        methods: {
            ...mapActions('user', {
                'login': 'login',
            }),
            /**
             * 提交登录
             */
            onSubmit(){
                this.$refs.form.validate().then(()=>{
                    let formData = this.formData;
                    this.login(formData).then(res => {
                        // 跳转地址
                        let redirectPath = this.$route.query.redirectPath || "/";
                        this.$router.replace(redirectPath);
                    });
                });
            },
        },
    }
</script>

<style scoped>
    /*登录页面样式，添加背景图片*/
    .login-wrapper{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: url('~@/assets/bg.png') no-repeat;
        background-size: 100% 100%;
    }

    /*登录表单容器*/
    .content-box {
        width: 800px;
        max-width: 90%;
        height: 400px;
        background-color: white;
        border-radius: 12px;
        overflow: hidden;
    }
    .content-box .left {
        width: 0;
        height: 100%;
        flex: 1;
    }
    .content-box .right {
        width: 0;
        height: 100%;
        flex: 1;

    }
</style>
